<template>
  <section class="invoice">
    <nav-bar>
      <div class="center" slot="center">选择发票抬头</div>
    </nav-bar>
    <p class="receipt">
      <span>不需要开发票</span>
      <svg
        class="svg"
        @click="handleSwitchCheckMarkBgC"
        :style="{ backgroundColor: isShow ? '#4cd964' : '#999999' }"
      >
        <use xlink:href="#check-mark" />
      </svg>
    </p>
    <input type="button" value="确定" @click="handleSkipConfirmOrder" />
  </section>
</template>

<script>
import NavBar from "components/common/navbar/NavBar";
export default {
  data() {
    return {
      isShow: false,
    };
  },
  methods: {
    handleSwitchCheckMarkBgC() {
      this.isShow = !this.isShow;
    },
    handleSkipConfirmOrder() {
      this.$router.go(-1)
    }
  },
  components: {
    NavBar,
  },
};
</script>
<style lang="less" scoped>
@import url("assets/css/mixin");
.invoice {
  background-color: #f5f5f5;
  color: #333333;
  .initial-children();
  .receipt {
    display: flex;
    justify-content: space-between;
    padding: 20px 10px;
    background-color: #fff;
    .svg {
      .check-mark();
    }
  }
  input[type="button"] {
    .determine();
  }
}
</style>